<template>
	<view>
		<!-- 头部 -->
		<view class="head">
			<view class="box">
				
					<view class="box_left" @click="navTo('/pagesB/my/personal')">
						<image src="../../static/home/1.jpg" mode=""></image>
					</view>
					<view class="box_right"> 
						<view class="right_top">
							<view>
								<text class="text">JAVAEN</text>
								<text class="text1">美vip</text>
							</view>
							<view class="right_log" @click="goCode()">
								<text class="icon iconfont">&#xe624;</text>
								<text class="icon iconfont">&#xe6f2;</text>
							</view>
						</view>
						<view class="text2">
							<text >媒体人｜成都</text>
						</view>
						<view class="right_bot">
							<text class="text2">一个有趣的灵魂的工匠师</text>
							<text class="text3" @click="goShop()">切换到店铺</text>
						</view>
					</view>
				
					
			</view>
			<view class="box_bottom">
				<view>
					<view class="number">789</view>
					<view class="text">关注</view>
				</view>
				<view>
					<view class="number">789</view>
					<view class="text">收藏</view>
				</view>
				<view>
					<view class="number">789</view>
					<view class="text">浏览</view>
				</view>
			</view>
		</view>
		<!-- 私人领地 -->
		<view class="private">
			<view class="box">
				<view class="img">
					<image src="../../static/my/tese.png" mode=""></image>
				</view>
				
				<view class="text">
					<view class="text_left" @click="goPrivate">
						<view class="lindi1">私人领地</view>
						<view class="lindi">开启我的美丽之旅</view>
					</view>
					<view class="text_img">
						<view class="imgs" v-for="(item,index) in 2" :key='index'>
							<image src="../../static/home/1.jpg" mode="he"></image>
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<!-- 私人领地结束 -->
		
		<!-- 我的订单开始 -->
		<view class="my_order">
			<view class="order_box">
				<view class="order_top">
					<view class="name">我的订单</view>
					<view class="all"><text class="text">全部订单</text><text class="icon iconfont">&#xe6f2;</text></view>
				</view>
				<view class="order_bott">
					<view class="border" @click="goTobepaid">
						<view >
							<image src="../../static/my/dfk.png" mode=""></image>
						</view>
						<view class="text">待付款</view>
					</view>
					<view class="border" @click="goTobeconfirmed">
						<view >
							<image src="../../static/my/sq.png" mode=""></image>
						</view>
						<view class="text">待确认</view>
					</view>
					<view class="border" @click="goTobeused">
						<view >
							<image src="../../static/my/sh.png" mode=""></image>
						</view>
						<view class="text">待使用</view>
					</view>
					<view class="border" @click="goTobeevad">
						<view >
							<image src="../../static/my/pj.png" mode=""></image>
						</view>
						<view class="text">待评价</view>
					</view>
					<view  class="border-left">
						<view >
							<image src="../../static/my/dd1.png" mode=""></image>
						</view>
						<view class="text">商品订单</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的订单结束 -->
		<!-- 我的资产开始 -->
		<view class="my_order">
			<view class="order_box">
				<view class="order_top">
					<view class="name">我的资产</view>
					
				</view>
				<view class="order_bott bott">
					<view  class="border" @click="goCoupon()">
						<view >
							<image src="../../static/my/yhj.png" mode=""></image>
						</view>
						<view class="text">优惠券</view>
					</view>
					<view  class="border">
						<view >
							<image src="../../static/my/jb.png" mode=""></image>
						</view>
						<view class="text">美豆</view>
					</view>				
					<view  class="border">
						<view >
							<image src="../../static/my/jf1.png" mode=""></image>
						</view>
						<view class="text">积分</view>
					</view>
					<view  class="border">
						<view >
							<image src="../../static/my/t1.png" mode=""></image>
						</view>
						<view class="text">星达人</view>
					</view>
					<view class="border-left" @click="goAssets()">
						<view >
							<image src="../../static/my/zc1.png" mode=""></image>
						</view>
						<view class="text">资产中心</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的资产结束 -->
		<!-- 会员中心 -->
		<view class="vip">
			<view class="vip_box">
				<view class="vip_top">
					<view class="name">会员中心</view>
					
				</view>
				<view class="vip_center" @click="goMember()">
					<view class="text">
						<view class="text_img">
							<image src="../../static/my/vip.png" mode=""></image>
						</view>
						<view class="text_right">
							<view class="text_name">
								<view class="zmw">众美网</view>
								<view class="ptvip">普通/VIP会员</view>
							</view>
							<view class="code">
								<image src="../../static/my/code.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="zm">SC 028 1237 0000 001</view>
					<view class="vip_bottom">
						<view>ZHONG MEI</view>
						<view>会员到期：2021/02/20</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 会员中心结束 -->
		<!-- 我的服务 -->
		<view class="my_serve">
			<view class="my_box">
				<view class="serve_name">我的服务</view>
				<view class="serve_log">
					<view @click="navTo('/pages/my/personal/cooperation')">
						<view>
							<image src="../../static/my/hz.png" mode=""></image>
						</view>
						<view  class="text">我要合作</view>
					</view>
					<view @click="navTo('/pages/my/customer/customer')">
						<view>
							<image src="../../static/my/kf.png" mode=""></image>
						</view>
						<view class="text">客服</view>
					</view>
					<view  @click="navTo('/pages/my/personal/set-up')">
						<view>
							<image src="../../static/my/sz.png" mode=""></image>
						</view>
						<view class="text">设置</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的服务结束 -->
		<view style="height: 10rpx;"></view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			//切换店铺
			goShop(){
				uni.navigateTo({
					url:'/pagesD/index/index'
				})
			},
			//前往待付款
			goTobepaid(){
		
				uni.navigateTo({
					url:'./order/index?actived='+1
				})
				uni.$emit('active',{
					actived:1
				})
			},
			//前往待确认
			goTobeconfirmed(){
				uni.navigateTo({
					url:'./order/index?actived='+2
				})
				uni.$emit('active',{
					actived:2
				})
			},
			//前往待使用
			goTobeused(){
				uni.navigateTo({
					url:'./order/index?actived='+3
				})
				uni.$emit('active',{
					actived:3
				})
			},
			//前往待评价
			goTobeevad(){
				uni.navigateTo({
					url:'./order/index?actived='+4
				})
				uni.$emit('active',{
					actived:4
				})
			},
			// 客服
			goCode(){
				uni.navigateTo({
					url:'/pagesB/my/qrcode'
				})
			},
			// 优惠券
			goCoupon(){
				uni.navigateTo({
					url:'/pagesB/my/coupon'
				})
			},
			//前往私人领地
			goPrivate(){
				uni.navigateTo({
					url:'./private/index'
				})
			},
			// 会员中心
			goMember(){
				uni.navigateTo({
					url:'/pagesB/member/member'
				})
			},
			// 资产
			goAssets(){
				uni.navigateTo({
					url:'/pagesB/assets/index'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	// 头部
	.head{
		width: 100%;
		// height: 414rpx;
		padding-bottom: 10rpx;
		background: #00C6C2;
		.box{
			padding: 27rpx 27rpx;
			display: flex;
			align-items: center;
			.box_left{
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 26rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.box_right{
				width: 80%;
				.right_top{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: center;
					.text{
						font-size: 36rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 30px;
						opacity: 0.8;
					}
					.text1{
						display: inline-block;
						width: 62rpx;
						height: 24rpx;
						background: #000000;
						border-radius: 4px;						
						font-size: 16rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #F0D9A9;
						text-align:center;
						line-height: 24rpx;
						transform: translateY(-10rpx);
						margin-left: 10rpx;
						
					}
					.right_log{
						padding-right: 10rpx;
						.iconfont{
							color: white;
							
						}
						.icon{
							margin-left: 10rpx;
						}
					}
				}
				.text2{
					opacity: 0.8;
					height: 22px;
					font-size: 22rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FFFFFF;
				}
				.right_bot{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					text{
						display: inline-block;
					}
					.text3{
						display: inline-block;
						width: 114rpx;
						height: 40rpx;
						background: #FFFFFF;
						box-shadow: 0px 2rpx 5rpx 0px rgba(81, 81, 81, 0.41);
						border-radius: 20rpx;
						text-align: center;
						line-height: 40rpx;						
						font-size: 18rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #00C6C2;
					}
				}
			}
			
		}
		.box_bottom{
			display: flex;
			justify-content: space-between;
			padding: 0 49rpx;
			.number{				
				font-size: 26rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #FFFFFF;
				opacity: 0.8;
			}
			.text{				
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				opacity: 0.8;
			}
		}
	}
	//私人领地
	.private{
		padding: 36rpx 25rpx;
		background: #F9F9F9;
		.box{
			width: 100%;
			height: 70rpx;
			display: flex;
			align-items: center;
			.img{
				image{
					width: 50rpx;
					height: 50rpx;
				}
			}
			.text{
				width: 100%;
				display: flex;
				margin-left: 10rpx;
				justify-content: space-between;
				.text_left{
					flex: 1;
					.lindi{
						font-size: 18rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #8E8E8E;
					}
					.linxi1{
						
						font-size: 26rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #212121;
					}
				}
				
				.text_img{
					display: flex;
					flex: 1;
					.imgs{
						width: 50rpx;
						height: 50rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-left: -25rpx;
						image{
							width: 50rpx;
							height: 50rpx;
						}
					}
						
				}
			}
			
			
		}
	}
	//我的订单
		.my_order{
			height: 180rpx;
			background: #FFFFFF;
			box-shadow: 0px 7rpx 22rpx 0rpx rgba(211, 211, 211, 0.64);
			padding: 29rpx 0rpx;
			margin-bottom: 20rpx;
			.order_box{
				.order_top{
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					align-items: center;
					padding: 0 25rpx;
					.name{
						font-size: 30rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #212121;
					}
					.all{
						font-size: 22rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #B4B4B4;
						.iconfont{						
							display: inline-block;
							transform: translateY(6rpx);
						}
					}
					
				}
			}
			.order_bott{
				display: flex;
				justify-content: space-between;
				align-items: center;
				text-align: center;
				margin-top: 30rpx;
				
				.border{
					padding: 10rpx 20rpx;
					
					image{
						width: 50rpx;
						height: 45rpx;
					}
					.text{
						margin-top: 10rpx;
						font-size: 26rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #8E8E8E;
					}
				}
				
				
				.border-left{
					padding: 0 30rpx;
					border-left: 1rpx solid #CCCCCC;
					
					image{
						width: 50rpx;
						height: 45rpx;
					}
					.text{
						margin-top: 10rpx;
						font-size: 26rpx;
						font-family: PingFang;
						
						font-weight: bold;
						color: #000;
					}
				}
			}
			
		}
	//会员中心
	.vip{
		padding: 26rpx 25rpx;
		height: 344rpx;
		background: #FFFFFF;
		box-shadow: 0px 4rpx 7rpx 0rpx rgba(211, 211, 211, 0.64);
		.vip_box{
			.vip_top{
				.name{
					
					font-size: 30rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #212121;
				}
			}
			.vip_center{
				margin-top: 31rpx;
				padding: 15rpx 21rpx;
				height: 236rpx;
				background: #363536;
				box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(100, 100, 100, 0.64);
				.text{
					display: flex;
					
					.text_img{
						width: 29rpx;
						height: 24rpx;
						margin-right: 10rpx;
						image{
							width: 29rpx;
							height: 24rpx;
						}
					}
					.text_right{
						width: 100%;						
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						.text_name{
							.zmw{			
								font-size: 30rpx;
								font-family: PingFang;
								font-weight: bold;
								color: #FFFFFF;
								opacity: 0.8;
							}
							.ptvip{								
								font-size: 16rpx;
								font-family: PingFang;
								font-weight: bold;
								color: #FFFFFF;
								opacity: 0.6;
							}
						}
						.code{
							width: 45rpx;
							height: 44rpx;
							image{
								width: 45rpx;
								height: 45rpx;
							}
						}
					}
				}
				.zm{
					margin-left: 63rpx;
					margin-top: 63rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					opacity: 0.9;
				}
			}
			.vip_bottom{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 40rpx;				
				font-size: 18rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				opacity: 0.9;
			}
		}
	}
	// 我的服务
	.my_serve{
		padding: 36rpx 26rpx;
		margin-top: 15rpx;
		height: 180rpx;
		background: #FFFFFF;
		box-shadow: 0px 4px 7px 0px rgba(211, 211, 211, 0.64);
		.my_box{
			.serve_name{				
				font-size: 30rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #212121;
			}
			.serve_log{
				display: flex;
				text-align: center;
				// justify-content: space-between;
				margin-top: 51rpx;
				view{
					margin-right: 60rpx;
				}
				image{
					width: 38rpx;
					height: 41rpx;
				}
				.text{					
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #8E8E8E;
				}
			}
		}
	}
</style>
